﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
	 xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:localControls="clr-namespace:Microsoft.Phone.Controls"
	xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls" 
    xmlns:PhoneApp5_Model="clr-namespace:YouTube.Model" 
    x:Class="YouTube.Views.MainView" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="Panoramastyle" TargetType="controls:Panorama">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <controlsPrimitives:PanoramaPanel x:Name="panel"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
           
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:Panorama">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">
                                <Border x:Name="background" Background="{TemplateBinding Background}" CacheMode="BitmapCache"/>
                            </controlsPrimitives:PanningBackgroundLayer>
                            <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="0" Grid.Row="0"/>
                            <controlsPrimitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
                                <ItemsPresenter x:Name="items"/>
                            </controlsPrimitives:PanningLayer>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="PanoItemStyle" TargetType="controls:PanoramaItem">
            <Setter Property="CacheMode" Value="BitmapCache"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:PanoramaItem">
                        <Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="Left" Margin="10,-2,0,10">
                                <ContentControl.RenderTransform>
                                    <TranslateTransform x:Name="headerTransform"/>
                                </ContentControl.RenderTransform>
                            </ContentControl>
                            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <DataTemplate x:Key="CategoryTemplate">
            <StackPanel Orientation="Horizontal" Margin="0,0,0,10">

                <TextBlock Text="{Binding}" FontSize="26.667" FontFamily="Segoe WP Black" />
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="YoutubeVideoTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding BestThumbnail.ContentUri}" Width="100" Height="100"/>
                <TextBlock Text="{Binding Title}" FontSize="30"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="ItemTemplate">
        	<Grid Height="108" Width="420" OpacityMask="AntiqueWhite" Margin="12">

                <Image Source="{Binding BestThumbnail.ContentUri}" HorizontalAlignment="Left" Width="108" Height="108" Margin="5,0,0,0" Stretch="UniformToFill"/>
        			<TextBlock Text="{Binding Title}" Margin="136,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="284" Height="36" TextWrapping="Wrap" FontSize="26.667" FontFamily="Segoe WP Black"/>
        		
        	</Grid>
        </DataTemplate>
        <DataTemplate x:Key="StandardPanoHeader">
            <Grid Background="Transparent" Height="80">
                <!--<TextBlock TextWrapping="Wrap" Text="{Binding}" FontFamily="Segoe WP Light" Foreground="{StaticResource WhiteBrush}" FontSize="64"/>-->
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="StandardTitle">
            <Grid Background="Transparent" Margin="0,0,0,0" Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.29*"/>
                    <ColumnDefinition Width="0.71*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="you" Foreground="White" FontSize="140.25" Grid.Column="0" />
                <TextBlock Text="tube" Foreground="Red" FontSize="140.25" Grid.Column="1" />
            </Grid>

        </DataTemplate>
        <DataTemplate x:Key="DataTemplate1">
            <Grid>
                <Grid.Resources>
                    <Storyboard x:Name="Storyboard1">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock">
                            <EasingDoubleKeyFrame KeyTime="0" Value="160"/>
                          

                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </Grid.Resources>
                <TextBlock x:Name="textBlock" Text="youtube" Margin="-18,20,19,-20" RenderTransformOrigin="0.5,0.5">
					<TextBlock.RenderTransform>
						<CompositeTransform/>
					</TextBlock.RenderTransform>
					<i:Interaction.Triggers>
						<i:EventTrigger EventName="Loaded">
							<eim:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
						</i:EventTrigger>
					</i:Interaction.Triggers>
                </TextBlock>
            </Grid>
        </DataTemplate>


        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <controlsPrimitives:PanoramaPanel x:Name="panel"/>
        </ItemsPanelTemplate>
        <Style x:Key="PanoramaItemStyle1" TargetType="controls:PanoramaItem">
            <Setter Property="CacheMode" Value="BitmapCache"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:PanoramaItem">
                        <Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
                            <Grid.Resources>
                                <Storyboard x:Name="Storyboard1">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="contentPresenter">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="60"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <BackEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="header">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="60">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <BackEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <BackEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </Grid.Resources>
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Loaded">
                                    <eim:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="10,-2,0,26">
                                <ContentControl.RenderTransform>
                                    <CompositeTransform/>
                                </ContentControl.RenderTransform>
                            </ContentControl>
                            <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
                                <ContentPresenter.RenderTransform>
                                    <CompositeTransform/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>
<toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    <!--Panorama-based applications should not show an ApplicationBar-->

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
        <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot" >

        <localControls:DynamicBackgroundPanorama x:Name="youtubePano" TitleTemplate="{StaticResource DataTemplate1}"
		>
           
                <!--Panorama item one-->
            <controls:PanoramaItem Header="toprated">
                <Grid>
                    <ListBox x:Name="Listbox1" Height="450" ItemTemplate="{StaticResource ItemTemplate}" Margin="0,0,0,0"/>
                </Grid>
            </controls:PanoramaItem>

            <!--Panorama item two-->
            <controls:PanoramaItem Header="Category">
                <Grid>
                    <ListBox x:Name="categoryList" Height="450"  ItemTemplate="{StaticResource CategoryTemplate}" Margin="18,0,-18,-7"/>
                </Grid>
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="Search">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="70"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="1,0,-1,0">
                    <TextBox  x:Name="SearchText" Width="300"  />
                        <Button Content="Search" Click="Button_Click" />
                    </StackPanel>
                    <ListBox ItemTemplate="{StaticResource ItemTemplate}"   x:Name="SearchListList" Grid.Row="1" Margin="0,0,0,0"/>
                </Grid>
            </controls:PanoramaItem>
            </localControls:DynamicBackgroundPanorama>
    </Grid>

</phone:PhoneApplicationPage>